import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
  Divider,
  Row,
  Col,
  Select,
  Button,
  Input,
  DatePicker,
  Modal,
  InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';

import { getParamUrl } from '../../utils/formatDataSource';
import { getCurrentUser } from '../../utils/authority';
@connect(({ tag2, loading }) => ({
  tag:tag2,
  loading: loading.models.tag2,
}))
@Form.create()
class TagMarkConfig extends PureComponent {
  state = {
    checkVisible: false,
    currentCheckCount: 0, // 当前审核的题目总数
    currentCheckSize: 50, // 抽检比例大小
    selectedRowKeys: [],
    selectedRows: [],
    statusValue: 1,
    createDateFrom: '',
    createDateTo: '',
    wordName: '',
    type: null,
    pageNo: 1,
    statusList: [0, 1, 3],
  };
  componentDidMount() {
    this.initLoad();
  }
  initLoad = () => {
    var params = { statusList: [0, 1, 3] };
    this.loadData(params);
  };
  searchByParam = () => {
    const { createDateFrom, createDateTo, wordName, type } = this.state;
    const { form } = this.props;
    const params = { statusList: [0, 1, 3] };
    if (createDateFrom !== '') {
      params.createDateFrom = createDateFrom;
    }
    if (createDateTo !== '') {
      params.createDateTo = createDateTo;
    }
    if (type) {
      params.type = type;
    }
    params.wordName = form.getFieldValue('wordName');
    this.loadData(params);
  };
  pageSearch = params => {
    const { createDateFrom, createDateTo, wordName, type } = this.state;
    const { form } = this.props;
    params.createDateFrom = createDateFrom;
    params.createDateTo = createDateTo;
    params.wordName = form.getFieldValue('wordName');
    params.type = type;
    this.loadData(params);
  };
  loadData = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tag/list',
      payload: params,
    });
  };

  statusSelect = e => {
    this.setState({
      type: e,
    });
  };

  getColumns = () => {
    return [
      {
        title: '文档名称',
        dataIndex: 'documentName',
        key: 'documentName',
        align: 'center',
      },
      {
        title: '题目数量',
        dataIndex: 'questionCount',
        key: 'questionCount',
        align: 'center',
      },
      {
        title: '标记用户',
        dataIndex: 'markPerson',
        key: 'markPerson',
        align: 'center',
      },
      {
        title: '更新时间',
        dataIndex: 'updateDate',
        key: 'updateDate',
        align: 'center',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        render: s => {
          return <span>{this.getStatusName(s)}</span>;
        },
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <Link
                to={`/lesson/markConfig?wordId=${record.id}&type=${record.type}`}
                hidden={record.operationLock !== 1}
              >
                标记
              </Link>
              <Link
                to={`/lesson/markConfig?wordId=${record.id}&type=${record.type}`}
                hidden={
                  record.status !== 3 ||
                  record.operationLock !== 2 ||
                  record.markPersonId != getCurrentUser().userId
                }
              >
                继续标识
              </Link>
              <Link
                to={`/lesson/markConfig?wordId=${record.id}&type=${record.type}`}
                hidden={
                  record.status !== 1 ||
                  record.operationLock !== 2 ||
                  record.markPersonId != getCurrentUser().userId
                }
              >
                继续标识
              </Link>
              {/*<a href="javascript:;" hidden={record.status !== 1} onClick={() => this.checkModalShow(record)}>审核</a>*/}
            </span>
          );
        },
      },
    ];
  };

  getStatusName = status => {
    switch (status) {
      case 0:
        return '待标记';
      case 1:
        return '正在标记';
      case 3:
        return '已驳回';
      default:
        return '已完成';
    }
  };
  checkOk = () => {
    this.setState({ checkVisible: false });
  };

  checkCancel = () => {
    this.setState({ checkVisible: false });
  };

  checkSizeChange = e => {
    this.setState({ currentCheckSize: e });
  };
  tablePageChange = pageNo => {
    this.setState({
      pageNo: pageNo,
    });
    var param = {};
    param.pageNo = pageNo;
    param.statusList = [0, 1];
    this.pageSearch(param);
  };

  createDateChange = (date, dateString) => {
    this.setState({
      createDateFrom: dateString[0],
      createDateTo: dateString[1],
    });
  };

  render() {
    const Option = Select.Option;
    const { RangePicker } = DatePicker;
    const FormItem = Form.Item;
    const { tags } = this.props.tag;
    const { getFieldDecorator } = this.props.form;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Form span={24} layout="inline" onSubmit={this.searchByParam}>
            <FormItem label="文档名称">
              {getFieldDecorator('wordName')(<Input placeholder="文档名称" />)}
            </FormItem>
            <FormItem span={4}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </FormItem>
            <FormItem label="类型">
              <Select defaultValue="" onSelect={this.statusSelect}>
                <Option value="">全部</Option>
                <Option value="1">考试</Option>
                <Option value="2">概念</Option>
              </Select>
            </FormItem>
            <FormItem label="录入时间">
              <RangePicker span={12} onChange={this.createDateChange} size="small" />
            </FormItem>
            <Table
              dataSource={tags.list}
              columns={this.getColumns()}
              pagination={{
                onChange: this.tablePageChange,
                current: this.state.pageNo,
                size: 10,
                total: tags.total,
                showTotal() {
                  return (
                    <span>
                      共 <a style={{ color: '#1893ab' }}>{tags.total}</a> 道
                    </span>
                  );
                },
              }}
            />
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default TagMarkConfig;
